import React, { useEffect, useState } from 'react';
import './Management.scss'
import { DownOutlined, SearchOutlined, PlusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Button, Modal, Cascader, Space, Input, Tag, Table, Drawer, Checkbox, Form } from 'antd';
import * as service from '../../../../api/index'
import * as zzservice from '../../../../api/indexzz';
import { useNavigate } from "react-router-dom"
import { async } from 'q';


interface Props {

}
function Management(props: Props) {
  const [car, setCar] = useState([])
  const [carxx, setCarxx] = useState([])
  const [carxq, setCarxq] = useState<any>({})
  const [inpu, setInpu] = useState('')
  const [inpuid, setInpuid] = useState('')
  const [xiuinpu, setXiuinpu] = useState<any>({})
  var [form] = Form.useForm()
  let navigate = useNavigate()
  interface Option {
    value: string | number;
    label: string;
    children?: Option[];
  }

  const options: Option[] = [
    {
      value: 0,
      label: '空闲',

    },
    {
      value: 1,
      label: '使用中',
    },
  ];


  const [isModalOpen, setIsModalOpen] = useState(false);

  const onFinish =async (values: any) => {
    console.log('Success:', values);
    // if(values.id){
    //   var res2 = await service.car_xiuclassification({...values,title:values.value})
    // }else{
    //   var res1 = await service.car_addclassification({...values,title:values.value})
    // }
    // var res = await service.car_classification()
    // setCar(res.data)
    setIsModalOpen(false);
   
  };

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
    setIsModalOpen(false);
  };


  const showModal = () => {
    setIsModalOpen(true);
    form.resetFields()
  };


  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const onChange = async (value: any) => {
    value = value.join()
    // var res = await service.car_car()
    var res = await zzservice.car_car()
    var t = res.data.data.filter((item: any, index: any) => {
      return item.status == value
    })
    setCarxx(t)
  };


  var fa = async () => {
    // var res = await service.car_classification()
    var res = await zzservice.car_fencar()
    // var res1 = await service.car_car()
    var res1 = await zzservice.car_car()
    setCar(res.data.data)
    setCarxx(res1.data.data)
    console.log(res1.data.data);
    

  }
  useEffect(() => {
    fa()
  }, [])

  var cha = async (e: any) => {
    // var res = await service.car_search({ name_like: e.target.value })
    // setCarxx(res.data)
  }



  const columns: any = [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id',
      align: 'center',
      // width: 40
    },
    {
      title: '车辆图片',
      key: 'pic',
      render: (_: any, record: any) => (<img src={record.pic} alt="" style={{ width: 60, height: 40 }} />),
      align: 'center',
      // width: 80
    },
    {
      title: '车辆名称',
      dataIndex: 'name',
      key: 'name',
      align: 'center',
      // width: 100
    },
    {
      title: '车牌号',
      dataIndex: 'numberplate',
      key: 'numberplate',
      align: 'center',
      // width: 80
    },
    {
      title: '车型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
      // width: 80
    },
    {
      title: '品牌型号',
      dataIndex: 'brand',
      key: 'brand',
      align: 'center',
      // width: 80
    },
    {
      title: '裸车价',
      dataIndex: 'price',
      key: 'price',
      align: 'center',
      // width: 80
    },
    {
      title: '车辆分类',
      dataIndex: 'sort',
      key: 'sort',
      align: 'center',
      // width: 80
    },
    {
      title: '车辆状态',
      dataIndex: 'status',
      render: (_: any, record: any) => (record.status == 0 ? <Tag color="success">空闲</Tag> : <Tag color="error">使用中</Tag>),
      align: 'center',
      // width: 80
    },

    {
      title: '操作',
      key: 'action',
      align: 'center',
      // width: 140,
      render: (_: any, record: any) => (
        <Space size="middle">
          <a onClick={() => { showDrawer(record) }}>查看详情</a>
          <a onClick={() => { navigate({ pathname: '/index/Vehicle/addcar', search: `id=${record.id}` }) }}>编辑</a>
          <a onClick={() => { dele(record.id) }}>删除</a>
        </Space>
      ),
    },
  ];


  const [open, setOpen] = useState(false);

  const showDrawer = (record: any) => {
    setCarxq(record)
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  // 车辆单删除
  var dele = async (id: any) => {
    // var res = await service.car_delete({ id })
    var res = await zzservice.car_delCar({ id })
    // var res1 = await service.car_car()
    var res1 = await zzservice.car_car()
    setCarxx(res1.data.data)
  }
  // 车辆分类输入内容
  var addlei = (e: any) => {
    setInpu(e.target.value)
  }
  // 车辆分类删除
  var fenleidel = async (id: any) => {
    // var res1 = await service.car_deleteclassification({ id })
    // var res = await service.car_classification()
    // setCar(res.data)
  }
  // 车辆分类编辑
  var fenleiedit = async (id: any) => {
    setIsModalOpen(true);
    // var res1 = await service.car_editclassification({ id })
    // form.setFieldsValue(res1.data)

  }
  // 车辆分类查询
  var fenchaxun= async(value:any)=>{
//  var res=await service.car_searchclassification({sort:value})
//  setCarxx(res.data)
  }
  return (
    <div className='management'>
      <div className="hai">
        <div className="h"></div>
        <div className="h1">车辆管理</div>
      </div>
      <div className="h2">
        <div className="a1">
          <span style={{ color: '#858383' }}>车辆选择</span>
          <Cascader options={options} onChange={onChange} placeholder="请选择" className='xuan' />
          <Input placeholder="请输入关键字" suffix={<SearchOutlined />} style={{ width: 300 }} onPressEnter={(e) => { cha(e) }} />
        </div>
        <div className="a2">
          <Button type="primary" icon={<PlusOutlined />} onClick={() => { navigate('/index/Vehicle/addcar') }}>新增车辆</Button>
          <Button type="primary" ghost style={{ marginLeft: 10 }} onClick={()=>{ fa()}}>刷新</Button>
        </div>

      </div>
      <div className="h3">
        <div className="zuo">
          <div className="han">
            <span>车辆分类</span>
            <PlusCircleOutlined style={{ color: 'blue' }} onClick={showModal} />
          </div>
          {
            car.map((item: any, index) => {
              return (
                <div className="item" key={index} >

                  <span style={{ cursor: 'pointer' }} onClick={()=>{fenchaxun(item.value)}}>{item.value}</span>
                  <div>
                    <Tag color="magenta" style={{ cursor: 'pointer' }} onClick={() => { fenleiedit(item.id) }}>编辑</Tag>
                    <Tag color="volcano" style={{ cursor: 'pointer' }} onClick={() => { fenleidel(item.id) }}>删除</Tag>
                  </div>

                </div>
              )
            })
          }
          {
            isModalOpen ? (
              <div className='tan'>
                <Form
                form={form}
                  name="basic"
                  labelCol={{ span: 8 }}
                  wrapperCol={{ span: 16 }}
                  style={{ maxWidth: 400 }}
                  initialValues={{ remember: true }}
                  onFinish={onFinish}
                  onFinishFailed={onFinishFailed}
                  autoComplete="off"
                >
                  <Form.Item
                    label="分类名称："
                    name="value"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <Input />
                  </Form.Item>

                  <Form.Item
                    label="id"
                    name="id"
                    hidden
                  >
                    <Input />
                  </Form.Item>
                  <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                    <Button onClick={handleCancel} style={{marginRight:10}}>
                      取消
                    </Button>
                    <Button type="primary" htmlType="submit">
                      确认
                    </Button>
                  </Form.Item>
                </Form>
              </div>

            ) : ''
          }

        </div>
        <div className="you">
          <Table columns={columns} dataSource={carxx} />
        </div>
      </div>
      <Drawer title="车辆详情" placement="right" onClose={onClose} open={open}>
        <img src={carxq.pic} alt="" style={{ width: 340, height: 200 }} />

        <Tag color="magenta">车辆名称：{carxq.name}</Tag>
        <Tag color="magenta">车牌号：{carxq.numberplate}</Tag>
        <Tag color="magenta">车型：{carxq.type}</Tag>
        <Tag color="magenta">品牌型号：{carxq.brand}</Tag>
        <Tag color="magenta">裸车价：{carxq.price}万元</Tag>
        <Tag color="magenta">车座：{carxq.saddle}座</Tag>

      </Drawer>
    </div>
  );
}

export default Management;